<template>
	<view class="good_list">
		<goodList :hotGoods="hotGoods" @itemClick="goGoodsDetail"></goodList>
		<view class="isOver" v-if="flag">
			----没有更多了😭----
			
		</view>
	</view>
</template>

<script>
	
	import goodList from '@/pages/components/good_list.vue'
	export default {
		data() {
			return {
				hotGoods:[],
				pageIndex:1,
				flag:false,
				
			}
		},
		onLoad() {
		this.getGoodList()	
		},
		components:{
			goodList,
		},
		methods: {
			async getGoodList(callback){
				const res = await this.$myRequest({
					url:'/api/getgoods?pageindex='+this.pageIndex
				})
				this.hotGoods = [...this.hotGoods,...res.data.message]
				callback && callback()
				
			},
			goGoodsDetail(id){
				uni.navigateTo({
					url:'/pages/goodsDetail/goodsDetail?id='+id
				})
			}
			
		},
		onReachBottom() {
			console.log('触底了....');
			if(this.hotGoods.length<this.pageIndex*10)return this.flag = true
			
			this.pageIndex++
			this.getGoodList()
			
		},
		onPullDownRefresh() {
			console.log('下拉刷新了....');
			this.pageIndex=1;
			this.hotGoods = []
			this.flag = false
			setTimeout(()=>{
				this.getGoodList(()=>{
						uni.stopPullDownRefresh()
				})
			},1000) 
			 
		},
	
	
	}
</script>

<style lang="scss">
	
	.good_list{
		background-color: #eee;
		.isOver{
			width: 100%;
			height: 50px;
			line-height: 50px;
		
			text-align: center;
			font-size: 28rpx;
		}
		
	}
	
</style>
